<script setup>
import {http} from "src/utils/http.js";
import bus from "../../utils/eventBus"
import {conf} from "src/utils/serverHost.js";

  let officeDom = ref(null)
import OnlyOffice from "components/onlyOffice.vue";
import {ref} from "vue";
let prop = defineProps(['msg'])

const showFile = (x) => {
 officeDom.value.openDialog('http://112.192.23.17:5080/DownloadMistakeFile?fileurl='+x)
}
window.toHttp = (x) => {
  fetch(conf.httpHost + '/QueryEventByEventName?eventName=' + x, {
    method: 'GET',
  }).then(response => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.text(); // 或者 response.json() 取决于服务器返回的数据类型
    })
    .then(data => {
      // console.log(data); // 服务器返回的响应数据
      let eventId = JSON.parse(data).event.id
      bus.$emit('clickEvent', x, eventId)
    })
    .catch(error => {
      console.error('There has been a problem with your fetch operation:', error);
    });
}
window.clickEvent = (x, messagetype,fileUrl) => {
  if(messagetype  != 'guess' && messagetype  != 'kgevent' && messagetype !='mistakefile') return;
  let str = x.parentElement.textContent;
  str = str.replace( /[0-9.>]+/g, '');
  if (messagetype == 'mistakefile') {
    showFile(fileUrl);
    return;
  }
  toHttp(str)
}
</script>

<template>
  <div class="answer-me">
    <div class="answer-icon">
      <img src="../../assets/images/panda.png" alt="">
    </div>
    <div class="me-ques">
      <span v-if="!prop.msg.text[0]['content'][0]?.con">思考中...</span>
      <div v-else class="kuai" v-for="x in prop.msg.text" v-show="x.content.length">
        <div v-for="i in x.content" :class="x.textType">
          <span v-html="i.con" class="span" v-show="!i.hideRow" :class="i.typewriter +' '+ i.isTit"></span>
        </div>
      </div>
    </div>
    <only-office ref="officeDom"></only-office>
  </div>
  <!--  <div class="extend" v-show="prop.msg.eventMsg">-->
  <!--    <div class="e1">该问题关联类型为：{{prop.msg.eventMsg?.Requiretype}}</div>-->
  <!--    <div class="e2"v-show="prop.msg.eventMsg?.KgEvent?.length">-->
  <!--      <div class="e2-list" v-for="x in prop.msg.eventMsg?.KgEvent" @click="clickEventName(x)">{{x}}</div>-->
  <!--    </div>-->
  <!--    <div class="e3" v-show="prop.msg.eventMsg?.Guess?.length">-->
  <!--      <div class="e3-tit">猜你想问：</div>-->
  <!--      <div class="e3-list" v-for="x in prop.msg.eventMsg?.Guess"><span>{{x}}</span></div>-->
  <!--    </div>-->
  <!--  </div>-->
</template>

<style scoped lang="scss">
.answer-me {
  display: flex;
  margin-top: 10px;
  margin-bottom: 10px;

  .answer-icon {
    width: 30px;
    height: 30px;
    position: relative;
    top: 5px;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }

  .me-ques {
    width: calc(100% - 35px);
    background-color: white;
    border-radius: 10px;
    padding: 10px;
    margin-left: 10px;
    letter-spacing: 2px;

    .kuai {
      margin-bottom: 20px;
      background-color: #f5f5f5;
      padding: 20px;

      strong {
        font-size: 16px !important;
      }

      .kgevent {
        margin-bottom: 10px;
          .title{
              background-color: #f5f5f5 !important;
              padding: 0px !important;
              border-radius: 0px !important;
          }
        .span {
          background-color: #e0e0e0;
          padding: 3px 10px;
          border-radius: 3px;
          margin: 10px 0;
          cursor: pointer;
        }

        .span:hover {
          transition: all .3s;
          scale: 1.1;
            background-color: #ffffff!important;
        }
      }

      .kgevent:nth-child(1), .kgevent:nth-child(2), .kgevent:nth-child(3) {
        .span {
          background-color: #f5f5f5 !important;
          padding: 0px !important;
          border-radius: 0px !important;
        }
      }


      .guess {
        margin-bottom: 10px;
          .title{
              background-color: #f5f5f5 !important;
              padding: 0px !important;
              border-radius: 0px !important;
          }
        .span {
          background-color: #e0e0e0;
          padding: 3px 10px;
          border-radius: 3px;
          margin: 10px 0;
          cursor: pointer;
        }

        .span:hover {
          transition: all .3s;
          scale: 1.1;
            background-color: #ffffff!important;
        }
      }

      .guess:nth-child(1), .guess:nth-child(2), .guess:nth-child(3) {
        .span {
          background-color: #f5f5f5 !important;
          padding: 0px !important;
          border-radius: 0px !important;
        }
      }
    }
  }
}

</style>
